<script setup lang="ts">
import { ref, reactive } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import { Search } from "@element-plus/icons-vue";
import Checked from "@iconify-icons/ep/checked";
import Notebook from "@iconify-icons/ep/notebook";
import Monitor from "@iconify-icons/ep/monitor";
import MiniProgram from "@iconify-icons/ri/mini-program-line";
import FileText from "@iconify-icons/ri/file-text-line";
import Prohibited from "@iconify-icons/ri/prohibited-line";
import Wechat from "@iconify-icons/ri/wechat-2-fill";
import Time from "@iconify-icons/ri/time-line";
import Macbook from "@iconify-icons/ri/macbook-line";
// import MenuSearch from "@iconify-icons/ri/menu-search-line";
import FileSearch from "@iconify-icons/ri/file-search-line";
import { message } from "@/utils/message";
defineOptions({
  name: "",
});

const vulnerForm = reactive({
  policy_name: "",
  taskName: "",
  creater: "",
  task_id: "",
  ipscope: "",
  createTime: "",
});

const tableData = ref([
  {
    time: "2020-04-15",
    name: "陕西联通微厅",
    owner: "陕西联通",
    origin: "wscan",
    type: "公众号",
    appid: "6729s-5cc8-4104-a01a-f0b9011675cd",
  },
  {
    time: "2021-09-18",
    name: "陕西联通积分商城",
    owner: "陕西联通",
    origin: "wscan",
    type: "小程序",
    appid: "3343dds-5cc8-4104-a01a-f0b9011675cd",
  },
  {
    time: "2017-11-01",
    name: "延安联通",
    owner: "陕西联通",
    origin: "wscan",
    type: "公众号",
    appid: "tttts-5cc8-4104-a01a-f0b9011675cd",
  },
  {
    time: "2024-02-01",
    name: "西安联通",
    owner: "陕西联通",
    origin: "wscan",
    type: "微信公众号",
    appid: "sdsgss-5cc8-4104-a01a-f0b9011675cd",
  },
  {
    time: "2019-06-14",
    name: "10000专属客服",
    owner: "陕西联通",
    origin: "wscan",
    type: "小程序",
    appid: "47f2a45a-5cc8-ss-a01a-f0b9011675cd",
  },
  {
    time: "2020-09-07",
    name: "陕西动感地带俱乐部",
    owner: "陕西联通",
    origin: "wscan",
    type: "微信公众号",
    appid: "xxxa45a-5cc8-4104-a01a-f0b9011675cd",
  },

  {
    time: "2022-03-21",
    name: "联通网上营业厅选号",
    owner: "陕西联通",
    origin: "wscan",
    type: "小程序",
    appid: "47f2a45a-5cc8-4104-a01a-f0b9011675cd",
  },
  {
    time: "2023-09-14",
    name: "陕西联通优选",
    owner: "陕西联通",
    origin: "wscan",
    type: "微信公众号",
    appid: "9802-5cc8-4104-a01a-f0b9011675cd",
  },
  {
    time: "2021-04-01",
    name: "陕西联通流量卡",
    owner: "陕西联通",
    origin: "wscan",
    type: "小程序",
    appid: "47f2a45a-5cc8-4104-a01a-f0b9011675cd",
  },
]);

const currentPage = ref(1); // 当前页码
const pageSize = ref(20); // 每页显示的条数
const totalTabalData = ref(0); // 总条数

const seeAddRule = () => {
  seeAddRuleDialog.value = true;
};

//提示没权限
const alertDialog = () => {
  message("账户未开通此功能！");

  seeAddRuleDialog.value = false;
};

const formAddHardware = reactive({
  department: "",
});

const hardwareRules = reactive<FormRules>({
  taskName: [{ required: true, message: "请输入任务名称", trigger: "blur" }],
});

const seeAddRuleDialog = ref(false);
</script>

<template>
  <div>
    <div class="mini-box">
      <h3 class="abs-title">数据统计</h3>
      <p class="desc-all">
        微信公众号是开发者或商家在微信公众平台上申请的应用账号，该账号与QQ账号互通，实现和特定群体的文字、图片、语言、视频的全方位沟通、互动，形成了一种线上线下微信互动营销方式。
        当下，微信公众号、服务号、小程序的后台运营研发可能由第三方服务商提供。安全人员珍贵且紧缺，精力可能投入在其他更具价值的安全运营工作中，
        则有可能导致安全管理覆盖面不足的问题。我们可以通过自动化手段去检测这类资产的变化情况，及时发现与规避相关的安全风险（秘钥泄露、源码泄露）。
      </p>
      <div class="body">
        <div class="card-box">
          <div class="card border-r">
            <div class="left">
              <div class="num">
                <span class="card-click">0</span>
              </div>
              <div class="desc">
                <div>待审核</div>
                <div style="color: rgb(153, 163, 170); margin-top: 4px" />
              </div>
            </div>
            <div class="right">
              <!-- <i class="iconfont icon-wait-audit-60" /> -->
              <IconifyIconOffline :icon="FileSearch" />
            </div>
          </div>
          <div class="card border-r">
            <div class="left">
              <div class="num">
                <span class="card-click">9</span>
              </div>
              <div class="desc">
                <div>确认归属</div>
                <div style="color: rgb(153, 163, 170); margin-top: 4px" />
              </div>
            </div>
            <div class="right">
              <!-- <i class="iconfont yishenhe" /> -->
              <IconifyIconOffline :icon="Checked" />
            </div>
          </div>
          <div class="card border-r">
            <div class="left">
              <div class="num">
                <span class="card-click">4</span>
              </div>
              <div class="desc">
                <div>小程序</div>
                <div style="color: rgb(153, 163, 170); margin-top: 4px" />
              </div>
            </div>
            <div class="right">
              <!-- <i class="iconfont icon-mini-app-60" /> -->
              <IconifyIconOffline :icon="MiniProgram" />
            </div>
          </div>
          <div class="card border-r">
            <div class="left">
              <div class="num">
                <span class="card-click">5</span>
              </div>
              <div class="desc">
                <div>公众号</div>
                <div style="color: rgb(153, 163, 170); margin-top: 4px" />
              </div>
            </div>
            <div class="right">
              <!-- <i class="iconfont official-accounts-60" /> -->
              <IconifyIconOffline :icon="FileText" />
            </div>
          </div>
          <div class="card border-r border-t">
            <div class="left">
              <div class="num">
                <span class="card-click">1</span>
              </div>
              <div class="desc">
                <div>深度监控</div>
                <div style="color: rgb(153, 163, 170); margin-top: 4px" />
              </div>
            </div>
            <div class="right">
              <!-- <i class="iconfont icon-deep-monitor-60" /> -->

              <IconifyIconOffline :icon="Monitor" />
            </div>
          </div>
          <div class="card border-r border-t">
            <div class="left">
              <div class="num">
                <span class="card-click">0</span>
              </div>
              <div class="desc">
                <div>黑名单</div>
                <div style="color: rgb(153, 163, 170); margin-top: 4px" />
              </div>
            </div>
            <div class="right">
              <!-- <i class="iconfont icon-blacklist-60" /> -->
              <IconifyIconOffline :icon="Prohibited" />
            </div>
          </div>
          <div class="card border-r border-t">
            <div class="left">
              <div class="num">
                <span class="card-click">0</span>
              </div>
              <div class="desc">
                <div>近七天新增</div>
                <div style="color: rgb(153, 163, 170); margin-top: 4px" />
              </div>
            </div>
            <div class="right">
              <!-- <i class="iconfont jin7tianxinzeng" /> -->
              <IconifyIconOffline :icon="Time" />
            </div>
          </div>
          <div class="card border-r border-t">
            <div class="left">
              <div class="num">
                <span class="">正常</span>
              </div>
              <div class="desc">
                <div>查询引擎</div>
                <div style="color: rgb(153, 163, 170); margin-top: 4px">
                  2024-02-18 22:20:01
                </div>
              </div>
            </div>
            <div class="right">
              <!-- <i class="iconfont icon-query-engine" /> -->
              <IconifyIconOffline :icon="Macbook" />
            </div>
          </div>
        </div>
        <div class="top-wrap" style="flex: 1 1 auto">
          <div class="title">运营数量top5</div>
          <div style="height: calc(100% - 12px)">
            <section
              class="el-container chart-con is-vertical"
              style="height: 100%; width: 100%"
            >
              <header class="el-header chart-header" style="height: auto" />
              <main class="el-main chart-main">
                <div
                  class="chart-box"
                  style="
                    -webkit-tap-highlight-color: transparent;
                    user-select: none;
                    position: relative;
                    display: none;
                  "
                  _echarts_instance_="ec_1708257029304"
                >
                  <div
                    style="
                      position: relative;
                      width: 425px;
                      height: 172px;
                      padding: 0px;
                      margin: 0px;
                      border-width: 0px;
                    "
                  >
                    <canvas
                      data-zr-dom-id="zr_0"
                      width="425"
                      height="172"
                      style="
                        position: absolute;
                        left: 0px;
                        top: 0px;
                        width: 425px;
                        height: 172px;
                        user-select: none;
                        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
                        padding: 0px;
                        margin: 0px;
                        border-width: 0px;
                      "
                    />
                  </div>
                  <div />
                </div>
                <div class="text-empty" style="" />
              </main>
            </section>
          </div>
        </div>
        <div class="box">
          <div class="desc">监控关键字</div>
          <div class="num">0</div>
          <div
            class="reset-btn btn model-1 normal"
            style="margin-bottom: 6px"
            @click="seeAddRule()"
          >
            查看或添加规则
          </div>
          <div class="reset-btn btn model-1 normal">黑名单管理</div>
          <!----><!---->
        </div>
      </div>
    </div>

    <div class="mini-list">
      <el-card shadow="never">
        <template #header>
          <div class="card-header">
            <el-form
              :inline="true"
              :model="vulnerForm"
              size="small"
              class="demo-form-inline"
              @submit.prevent
            >
              <el-form-item v-if="false">
                <el-button type="primary" @click="showAddHardwareDialog = true"
                  >新建任务</el-button
                >
              </el-form-item>

              <el-form-item label="名称">
                <el-input
                  v-model="vulnerForm.taskName"
                  placeholder="名称"
                  maxlength="30"
                  clearable
                  @keydown.enter="getAllTaskList(vulnerForm.taskName)"
                >
                  <template #append>
                    <el-button
                      :icon="Search"
                      @click="getAllTaskList(vulnerForm.taskName)"
                    />
                  </template>
                </el-input>
              </el-form-item>

              <el-form-item label="账号主体">
                <el-input
                  v-model="vulnerForm.creater"
                  placeholder="账号主体"
                  maxlength="30"
                  clearable
                  @keydown.enter="getAllTaskList(vulnerForm.creater)"
                >
                  <template #append>
                    <el-button
                      :icon="Search"
                      @click="getAllTaskList(vulnerForm.creater)"
                    />
                  </template>
                </el-input>
              </el-form-item>

              <el-form-item label="注册时间">
                <el-input
                  v-model="vulnerForm.ipscope"
                  placeholder="注册时间"
                  maxlength="30"
                  clearable
                  @keydown.enter="getAllTaskList(vulnerForm.ipscope)"
                >
                  <template #append>
                    <el-button
                      :icon="Search"
                      @click="getAllTaskList(vulnerForm.ipscope)"
                    />
                  </template>
                </el-input>
              </el-form-item>

              <el-form-item label="AppId">
                <el-input
                  v-model="vulnerForm.task_id"
                  placeholder="AppId"
                  maxlength="30"
                  clearable
                  @keydown.enter="getAllTaskList(vulnerForm.task_id)"
                >
                  <template #append>
                    <el-button
                      :icon="Search"
                      @click="getAllTaskList(vulnerForm.task_id)"
                    />
                  </template>
                </el-input>
              </el-form-item>
            </el-form>
          </div>
        </template>

        <el-table :data="tableData" style="width: 100%">
          <el-table-column type="index" width="100" label="序号" />

          <el-table-column label="发布时间" prop="time">
            <!-- <template #default="rowscope">
              <el-link
                type="primary"
                :underline="true"
                @click="gotoTaskDetail(rowscope.row)"
                >{{ rowscope.row.job_name }}
              </el-link>
            </template> -->
          </el-table-column>
          <el-table-column label="名称" prop="name" />

          <el-table-column label="类型" prop="type" />
          <el-table-column label="拥有者" prop="owner" />
          <el-table-column label="AppId" prop="appid" />

          <el-table-column label="操作" fixed="right">
            <template #default="rowscope">
              <el-button
                size="small"
                type="primary"
                @click="goVulnerDetail(rowscope.$index, rowscope.row)"
              >
                查看详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          @current-change="getAllTaskList"
          v-model:current-page="currentPage"
          :page-sizes="[10, 20, 50]"
          v-model:page-size="pageSize"
          @size-change="getAllTaskList"
          layout="total, sizes, prev, pager,next"
          :total="totalTabalData"
          background
        />
      </el-card>
    </div>

    <el-dialog
      v-model="seeAddRuleDialog"
      :show-close="true"
      destroy-on-close
      width="500px"
    >
      <template #header="{ titleId, titleClass }">
        <div class="my-header">
          <h4 :id="titleId" :class="titleClass">添加规则</h4>
        </div>
      </template>

      <el-form
        :inline="false"
        :model="formAddHardware"
        :rules="hardwareRules"
        ref="addHardwareFormRef"
        class="demo-form-inline"
      >
        <el-form-item label="规则关键字" label-width="100px" prop="department">
          <el-input
            v-model="formAddHardware.department"
            placeholder="请输入规则关键字"
            class="min-w-input"
            clearable
          />
        </el-form-item>
      </el-form>

      <template #footer>
        <div>
          <el-button @click="seeAddRuleDialog = false"> 取消 </el-button>
          <el-button type="primary" @click="alertDialog()">
            <!-- <el-icon class="el-icon--left"><CircleCloseFilled /></el-icon> -->
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
:deep(.el-card__header) {
}

:deep(.el-pagination) {
  justify-content: right;
  margin-top: 10px;
  margin-right: 30px;
}

.mini-box {
  height: 300px;
  background-color: #fff;
  padding: 16px 20px;
  background-color: #fff;

  .abs-title {
    align-items: center;
    font-size: 14px;
    color: #304554;
    letter-spacing: 0;
    line-height: 14px;
    padding-left: 6px;
    border-left: 3px solid #1699c6;
    margin-bottom: 7px;
  }

  .desc-all {
    font-size: 12px;
    color: #888;
    letter-spacing: 0;
    line-height: 18px;
    margin-bottom: 26px;
  }

  .body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 184px;
  }

  .card-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 54%;
    margin-right: 20px;

    & > div {
      width: 25% !important;
      height: 92px !important;
      -webkit-box-flex: 1;
      -ms-flex: auto;
      flex: auto;
    }

    .card {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      width: 100%;
      height: 100%;
      padding: 0 20px;
      background: #fff;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
    }

    .card .right {
      width: 60px;
      height: 60px;
    }

    .card .right i {
      display: inline-block;
      width: 100%;
      height: 100%;
      font-size: 60px;
      color: #1699c6;
      opacity: 0.3;
    }
    .card .right svg {
      display: inline-block;
      width: 100%;
      height: 100%;
      font-size: 60px;
      color: #1699c6;
      opacity: 0.3;
    }

    .card .left .num {
      display: inline-block;
      font-size: 30px;
      color: #2aa8bd;
      line-height: 30px;
      margin-bottom: 12px;
    }

    .card .left .desc {
      font-size: 12px;
      color: #666;
      line-height: 12px;
    }

    .card-click {
      cursor: pointer;
    }
  }

  .border-r {
    border-right: 1px solid #dfe2e4;
  }

  .border-t {
    border-top: 1px solid #dfe2e4;
  }

  .top-wrap {
    height: 184px;
    background: #fff;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  .title {
    font-size: 12px;
    color: #30a1c8;
    letter-spacing: 0;
    line-height: 12px;
  }

  .box {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 180px;
    height: 184px;
    background-color: #fff;
    border: 1px solid #dfe2e4;
    margin-left: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }

  .box .desc {
    font-size: 12px;
    color: #4a4a4a;
    text-align: center;
    line-height: 12px;
  }

  .box .num {
    font-size: 30px;
    color: #30a1c8;
    line-height: 30px;
    margin-top: 14px;
    margin-bottom: 22px;
  }

  .box .reset-btn {
    width: 120px;
    text-align: center;
    padding: 6px 0;
    margin-left: 0;
  }
}

.mini-list {
  background-color: #fff;
  margin-top: 20px;
}
</style>
